<template>
  <Teleport :to="renderTarget">
    <template v-if="iconList.length > 0">
      <div
        :class="[
          `float-container cursor-pointer flex flex-col fixed`,
          showPosition
        ]"
      >
        <template v-for="(item, index) in iconList" :key="item">
          <My-popover placement="LT" v-if="isShowPopover">
            <template #reference>
              <My-svg-icon
                @click="handleClick(item)"
                :class="iconStyleClass"
                :name="item"
              >
              </My-svg-icon>
            </template>
            <p @click="handleClick(item)" class="text-sm">
              {{ popoverContent[index] ? popoverContent[index] : item }}
            </p>
          </My-popover>
        </template>
      </div>
    </template>
    <template v-else>
      <div :class="[`float-container cursor-pointer fixed`, showPosition]">
        <My-svg-icon :class="iconStyleClass" :name="icon"></My-svg-icon>
      </div>
    </template>
  </Teleport>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  // 渲染在哪个节点上
  renderTarget: {
    type: String,
    default: 'body'
  },
  isShowPopover: {
    type: Boolean,
    default: false
  },
  // fixed定位后展示的位置
  showPosition: {
    type: String,
    default: 'right-2 bottom-1'
  },
  //单独渲染一个icon
  icon: {
    type: String
  },
  //批量渲染
  iconList: {
    type: Array
  },
  // 是否展示popover
  isShowPopover: {
    type: Boolean,
    default: false
  },
  //popover显示的内容
  popoverContent: {
    type: Array
  },
  // icon样式
  iconStyleClass: {
    type: String,
    default: 'bg-red-500 w-5 h-5'
  },
  // 路径可以通过点击icon跳转
  path: {
    type: String
  }
})
const emit = defineEmits(['click'])

const handleClick = (value) => {
  emit('click', value)
}
</script>

<style lang="scss" scoped></style>
